import { Meta } from '@storybook/addon-docs/blocks';
import img from './assets/teaser.png';

<Meta title="Docs/Introduction" />

<div style={{ margin: '0 auto', maxWidth: '600px', color: 'white', textAlign: 'center' }}>
  <img
    style={{ width: '75%', margin: '0 auto' }}
    src="https://github.com/reaviz/reaflow/raw/master/docs/assets/logo.png"
  />
  <br />
  Node-based Visualizations for React
  <br />
  <a href="https://github.com/reaviz/reaflow/workflows/build/" target="_blank">
    <img src="https://github.com/reaviz/reaflow/workflows/build/badge.svg?branch=master" />
  </a>
  <span>&nbsp;&nbsp;</span>
  <a href="https://npm.im/reaflow" target="_blank">
    <img src="https://img.shields.io/npm/v/reaflow.svg" />
  </a>
  <span>&nbsp;&nbsp;</span>
  <a href="https://npm.im/reaflow" target="_blank">
    <img src="https://badgen.net/npm/dw/reaflow" />
  </a>
  <span>&nbsp;&nbsp;</span>
  <a href="https://github.com/reaviz/reaflow/blob/master/LICENSE" target="_blank">
    <img src="https://badgen.now.sh/badge/license/apache2" />
  </a>
  <span>&nbsp;&nbsp;</span>
  <a href="https://discord.gg/tt8wGExq35" target="_blank">
    <img src="https://img.shields.io/discord/773948315037073409?label=discord" />
  </a>
  <span>&nbsp;&nbsp;</span>
  <a href="https://github.com/reaviz/reaflow" target="_blank">
    <img alt="GitHub stars" src="https://img.shields.io/github/stars/reaviz/reaflow?style=social" />
  </a>

  ---

  <a href="https://unifydesignsystem.com?utm=reaflow" target="_blank" style={{ background: 'black', padding: 5, borderRadius: 5, position: 'absolute', bottom: 5, right: 5, width: 325 }}>
    <img src={img} alt="Unify design system" />
  </a>

  REAFLOW is a modular diagram engine for build static or interactive editors.
  The library is feature rich and modular allowing for displaying complex
  visualizations with total customizability.

</div>
